<template>
	<div class="container">
		<h1>1.弹出框表格</h1>
		<a-button @click="openModal1">弹出表格复选框</a-button>
		<TableCell :height="400" :list="tableList" ref="tableModelRef" hhgPagination="true" :custom-row="checkRow" :row-selection="{ type: 'checkbox', selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }" :displaySearhList="displaySearhList" :columns="columns" :pageSize="pager.pageSize" :total="total" @getPageInfo="getPageInfo" @clearFilter="clearFilter" :loading="loading" @okSubmit="okSubmit" @clearList="clearList"/>
		<br/>
		<a-button @click="openModal2">弹出表格单选框</a-button>
		<TableCell :list="tableList" ref="tableModelRefRadio" hhgPagination="true" :custom-row="radioRow" :row-selection="{ type: 'radio', selectedRowKeys: state.radioSelectedRowKeys, onChange: onSelectChangeRadio }" :displaySearhList="displaySearhList" :columns="columns" :pageSize="pager.pageSize" :total="total" @getPageInfo="getPageInfo" @clearFilter="clearFilter" :loading="loading" @okSubmit="okSubmit" @clearList="clearListRadio"/>
		<h1>2.WaferID</h1>
		<HhgWaferID :width="500" :height="300" v-model="waferID" @selectedWaferID="selectedWaferID"
		:config="{
			isRead: false,
			list: waferIDList,
			labelName: 'WaferID',
			displayList: [{id: 'a1', name: 1}],
			hasError: true,
			name: 'waferID',
		}"/>
		<h1>3.单选成员弹框</h1>
		<a-button @click="popfn">点击单选成员弹框</a-button>
		<a-input style="width: 390px;" v-model:value="getValue" readonly></a-input>
		<SingleMember ref="singleModal" @fuzzySearch="fuzzySearchMember" @selectedMember="selectedSingleMember" @clearMebmer="clearApplyMebmer" v-bind="attrs" :config="{
			isRead: false, multiple: false, options: optionsSingleMember, list: memberList, subTitle: '待选人员（您可以通过搜索查询人员）', title: '选择成员', isTree: false //1-返回人员姓名+人员code  2-返回人员姓名+人员code + 返回单个数据流,multiple-false是单选true是多选
		}"/>
		<h1>4.混选成员</h1>
		<a-button @click="popfnMixed">点击混选成员</a-button>
		<div class="datalist">
			<p v-for="item in mixedMember" :key="item.id">{{ item.displayName }}</p>
		</div>
		<HhgMixedSelectionMember ref="selectMemberRef" @removeFn="removeFn" @fuzzySearch="fuzzySearch" @selectedMember="selectedMember" @clearMixedMebmer="clearMixedMebmer" @SwitchTab="SwitchTab" :list="listMixed" :config="{
			isRead: false,
			options: optionsMixed
		}"/>
		<h1>5.html编辑器</h1>
		<div>
			<vue-ueditor-wrap v-model="contents" :config="myConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
		</div>
	</div>
</template>
<script setup>
import { onMounted, ref, provide, reactive } from 'vue'
import { TableColumns } from "@/utils/tableConfig"
import { list } from '@/api/data'

import TableCell from '@/components/hhg-modalTable/hhg-modalTable'
import HhgWaferID from '@/components/hhg-selectWaferID/hhg-selectWaferID'

//waferID
const waferID = ref('')
const waferIDList = ref(Array.from({ length: 25 }, (_, i) => ({//测试数据
	id: 'a' + (i + 1),
	name: i + 1,
	selected: false,
})))
const selectedWaferID = data=> {
	//选择后得到的数据
	console.log(data)
}

//页码的相关
const tableModelRef = ref(null)
const tableModelRefRadio = ref(null)
const openModal1 = ()=> {
    tableModelRef.value.visible = true
}
const total = ref(null)
const pager = ref({
	current: 1,
	pageSize: 4,
	pageSizeOptions: [
		{
			value: 4,
			label: '4',
		},
		{
			value: 10,
			label: '10',
		},
		{
			value: 30,
			label: '30',
		},
		{
			value: 50,
			label: '50',
		}
	]
})
const okSubmit = data=> {
	//点击确定获取的数据
	console.log(data)
}
//回显搜索框
const displaySearhList = ref({
	companyName: '华宏',
	appCode: '我只是测试申请编号',
	title: '测试标题'
})

//提供数据给页码组件
provide('pagerTable', pager)
const state = reactive({
	selectedRowKeys: [], // 存储当前选中的行 key
	radioSelectedRowKeys: ''
})
const onSelectChange = selectedRowKeys => {
  console.log('selectedRowKeys changed: ', selectedRowKeys)
  state.selectedRowKeys = selectedRowKeys
}
//清空
const clearList = ()=> {
	state.selectedRowKeys = []
	tableModelRef.value.visible = false
}
// 监听行点击事件
const checkRow = (record) => {
	return {
		onClick: () => {
			// 判断当前行是否已选中
			const index = state.selectedRowKeys.indexOf(record.id);
			if (index > -1) {
				// 如果已选中，则取消选中
				state.selectedRowKeys.splice(index, 1);
			} else {
				// 如果未选中，则添加到选中列表
				state.selectedRowKeys.push(record.id);
			}
		}
	};
}
/*表格单选框单击行操作start*/
const openModal2 = ()=> {
    tableModelRefRadio.value.visible = true
}
const onSelectChangeRadio = selectedRowKeys => {
  console.log('selectedRowKeys222 changed: ', selectedRowKeys)
  state.radioSelectedRowKeys = selectedRowKeys
}
const radioRow = (record) => {
	return {
		onClick: () => {
			state.radioSelectedRowKeys = [record.id]
		},
		onDblclick () {
			console.log('获取的数据是', tableList.value.filter(i=> i.id === record.id))
			tableModelRefRadio.value.visible = false
		}
	}
}
//清空
const clearListRadio = ()=> {
	state.radioSelectedRowKeys = []
	tableModelRefRadio.value.visible = false
}
/*表格单选框单击操作end*/

//表头
const columns =  ref(TableColumns.HomeColumns)
//表格数据
const tableList = ref([])
//接口请求的方法
const getList = async (current, pageSize) => {
	const res = await list({
		current: current ? current : pager.value.current,
		pageSize: pageSize ? pageSize : pager.value.pageSize
	})
	if (res.code) {
		tableList.value = res.data.list
		total.value = res.data.total
	}
}
//搜索方法-回车-filter-排序
const getPageInfo = async params=> {
	const res = await list({
		...params
	})
	if (res.code) {
		
		tableList.value = res.data.list
		total.value = res.data.total
	}
}
//清空搜索
const clearFilter = async params=> {
	const res = await list({
		...params
	})
	if (res.code) {
		
		tableList.value = res.data.list
		total.value = res.data.total
	}
}
/* 单选成员弹框start */
import SingleMember from '@/components/hhg-singleMember/hhg-singleMember'
import { getMemberList } from '@/api/data'
const singleModal = ref(null)
const memberList = ref([])
const getValue = ref('')
const optionsSingleMember = ref('org')
const popfn = async ()=> {//触发显示弹框
	singleModal.value.visible = !singleModal.value.visible
	const type = optionsSingleMember.value
	if (type === 'emp') {
		memberList.value = localStorage.getItem('localMember') ? JSON.parse(localStorage.getItem('localMember')) : []
		singleModal.value.currentIndex = 0
	}
	if (type === 'group') {
		memberList.value = localStorage.getItem('localGroup') ? JSON.parse(localStorage.getItem('localGroup')) : []
	}
	if (type === 'org') {
		if (singleModal.value.visible) {
			singleModal.value.hhgSelectedKeys = []
		}
		const res = await getOrganizationList()
		if (res.code) {
			memberList.value = mapRecursive(buildTree(res.data.list), organizationItem)
		}
	}
	if (singleModal.value.visible) {
		singleModal.value.hhgSelectedKeys = []
	}
}
const clearApplyMebmer = ()=> {
	getValue.value = ''
	singleModal.value.visible = !singleModal.value.visible
}
const fuzzySearchMember = async (value)=> {
	//其中type: group, emp, org, text是搜索框的内容，letters是字母
	const { type, text, letters } = value
	if (type === 'emp') {
		const res = await getMemberList({text, letters})
		if (res.code) {
			memberList.value = res.data.list
			
		}
	}
	if (type === 'group') {
		const res = await getGroupList({text, letters})
		if (res.code) {
			memberList.value = res.data.list
		}
	}
	if (type === 'org') {
		const res = await getOrganizationList({text, letters})
		if (res.code) {
			memberList.value = mapRecursive(buildTree(res.data.list), organizationItem)
			
		}
	}
}
const selectedSingleMember = (value)=> {
	getValue.value = value.name
	singleModal.value.visible = !singleModal.value.visible
}
/* 单选成员弹框end */

/* 混选成员弹框start */
import HhgMixedSelectionMember from '@/components/hhg-selectMember/hhg-selectMember'
import { mapRecursive, buildTree, deepClone } from '@/utils/index'
import { getGroupList, getOrganizationList } from '@/api/data'
const selectMemberRef = ref(null)
const mixedMember = ref([])
const listMixed = ref([])
const optionsMixed = ref(null)
const popfnMixed = async ()=> {
	selectMemberRef.value.visible = !selectMemberRef.value.visible
	const type = optionsMixed.value
	if (type === 'emp' || !type) {
		listMixed.value = localStorage.getItem('localMember') ? JSON.parse(localStorage.getItem('localMember')) : []
		selectMemberRef.value.currentIndex = 0
	}
	if (type === 'group') {
		listMixed.value = localStorage.getItem('localGroup') ? JSON.parse(localStorage.getItem('localGroup')) : []
	}
	if (type === 'org') {
		const res = await getOrganizationList()
		if (res.code) {
			listMixed.value = mapRecursive(buildTree(res.data.list), organizationItem)
		}
	}
	setTimeout(() => {
		if (selectMemberRef.value && selectMemberRef.value.visible) {
			if (!optionsMixed.value) {
				selectMemberRef.value.actIndex = 'emp'
			}
			selectMemberRef.value.rightList = deepClone(mixedMember.value)
			if (selectMemberRef.value.visible) {
				selectMemberRef.value.hhgSelectedKeys = []
			}
		}
	}, 10)
}
const SwitchTab = async type=> {
	if (type === 'emp') {
		listMixed.value = localStorage.getItem('localMember') ? JSON.parse(localStorage.getItem('localMember')) : []
	}
	if (type === 'group') {
		listMixed.value = localStorage.getItem('localGroup') ? JSON.parse(localStorage.getItem('localGroup')) : []
	}
	if (type === 'org') {
		const res = await getOrganizationList()
		if (res.code) {
			listMixed.value = mapRecursive(buildTree(res.data.list), organizationItem)
		}
	}
}
const organizationItem = (item)=> {
  return {
    pId: item.pId,
    id: item.id,
    name: item.displayName,
    code: item.code,
    label: item.displayName,
    value: item.id
  }
}
const fuzzySearch = async (type, data)=> {
	
	if (type === 'emp') {
		const res = await getMemberList(data)
		if (res.code) {
			listMixed.value = res.data.list
			
		}
	}
	if (type === 'group') {
		const res = await getGroupList(data)
		if (res.code) {
			listMixed.value = res.data.list
		}
	}
	if (type === 'org') {
		const res = await getOrganizationList(data)
		if (res.code) {
			listMixed.value = mapRecursive(buildTree(res.data.list), organizationItem)
		}
	}
}
const selectedMember = (value)=> {
	mixedMember.value = [...value.data]
	selectMemberRef.value.visible = !selectMemberRef.value.visible
}
const clearMixedMebmer = ()=> {
	mixedMember.value = []
	selectMemberRef.value.visible = !selectMemberRef.value.visible
}
/* 混选成员弹框end */

/* 富文本 */
const contents = ref('我是富文本')
const myConfig = reactive({
	zIndex: 9999,//有层级问题可以设置zIndex
	autoHeightEnabled: false, // 编辑器不自动被内容撑高
	initialFrameHeight: 420, // 初始容器高度
	initialFrameWidth: '100%', // 初始容器宽度
	UEDITOR_HOME_URL: '/UEditor/',
	serverUrl: ``//后端配置的上传接口（接口返回配置只需要一个oobj，不需要外层内容）
})

// mounted
onMounted(() => {
	getList()
})
</script>
<style scoped lang="scss"></style>